<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>书籍详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="../libs/mui/mui.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" type="text/css" href="../libs/iconfont/fonts/iconfont.css"/>
		<style>
			/*图片*/
	   		.mui-table-view-cell>a:not(.mui-btn){
				 white-space:normal
			}
			.book.mui-table-view .mui-media-object {
				line-height: 80px;
				max-width:60px;
				height: 80px;
			}
			.book .mui-media-object{-webkit-box-shadow:0 5px 10px #858585;box-shadow: 0 5px 10px #858585;margin-right: 10px;}
			/*九宫格*/
			.mui-grid-view.mui-grid-9{background-color: #FFFFFF;border: none;}
			.mui-grid-view.mui-grid-9 .mui-table-view-cell{border: none;padding: 0;}
			.mui-grid-view.mui-grid-9 .mui-table-view-cell i{font-size: 30px !important;color:#272636 ;}
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{color:#929292;font-size: 12px;}
			/*简介*/
			.brief{background-color: #ffffff;padding: 15px;}
			.brief p{color:#333333;margin-top: 8px;}
			.brief .brief-all{display:none;}
			/*作者*/
			.autor{background-color: #ffffff;padding: 15px;}
			.autor p{color:#333333;margin-top: 8px;}
			.autor .autor-all{display:none;}
			/*评论*/
			.m5 .mui-table-view .mui-media-object.touxiang{border-radius: 100%; height: 40px !important; max-width:40px !important; line-height: 40px !important;}
			.m5 .mui-media-object{height: 60px !important; max-width: 60px !important; line-height: 60px !important;}
			.mui-table-view-cell p{font-size: 12px; }
			.words{color: #222222;padding: 8px 0;}
			/*底部*/
			.mui-tab-item>span{width: 100%;background: #ffffff;color: #139f13;display: inline-block;padding: 15px 0;text-align: center;}
			/*弹窗*/
			#topPopover {
				position: fixed;
				top: 50px;
				right: 6px;
			}
			#topPopover .mui-popover-arrow {
				left: auto !important;
				right: 6px;
			}
			.mui-popover{width: 50% !important;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">
				<span>三体</span>
			</a>
			<a class="mui-icon mui-pull-right" href="#topPopover">
				<h5>分享</h5>
			</a>
		</header>
		<nav class="mui-bar mui-bar-tab">
				<a class="mui-tab-item">
					<span class="jiaru">加入书架</span>
				</a>
				<a class="mui-tab-item read"  >
					<span class="read" style="background-color: #139f13;color: #fff;">开始阅读</span>
				</a>
		</nav>
		<div class="mui-content">
			<div>
				<ul class="mui-table-view book">
					<li class="mui-table-view-cell mui-media mui-text-center">
						<a>
							<img class="mui-media-object" src="../public/img/5.jpg">
							<div class="mui-media-body mui-text-left" style="display: inline-block;">
								<span>三体</span>
								<p style="padding: 8px 0;">
									<span class="mui-h5">刘慧欣</span>
								</p>
								<span class="mui-h5">
									<i class=" mui-icon iconfont" style="vertical-align: middle;font-size: 12px;">&#xe609;</i>
									<span>1000</span>
								</span>
							</div>
						</a>
					</li>
				</ul>
				<ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		            	<a>
		                    <i class="mui-icon iconfont want-read">&#xe625;</i>
		                    <div class="mui-media-body">想读</div>
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		            	<a onclick="openNewPage('send-comment.html')">
		                    <i class="mui-icon iconfont">&#xe61c;</i>
		                    <div class="mui-media-body">读过</div>
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		            	<a onclick="openNewPage('mulv.html')">
		                   	<i class="mui-icon iconfont">&#xe617;</i>
		                    <div class="mui-media-body">查看目录</div>
		            	</a>
		            </li>
		        </ul>
				<div class="brief m5">
					简介
					<p>
						《三体》是刘慈欣创作的系列长篇科幻小说，由《三体》、《
						三体Ⅱ·黑暗森林》、《三体Ⅲ·死神永生》组成，第一部于
						2006年5月起在《科幻世界》杂志上连载，第二部于2008年5月
						首次出版，第三部则于2010年11月出版。
						<span class="brief-all">
						作品讲述了地球人类文明和三体文明的信息交流、生死搏杀及
						两个文明在宇宙中的兴衰历程。其第一部经过刘宇昆翻译后获
						得了第73届雨果奖最佳长篇小说奖
						</span>
					</p>
					<p class="mui-text-center">
						<i class="mui-icon iconfont pull">&#xe61a;</i>
					</p>
				</div>
				<div class="autor m5">
					作者
					<p>
						刘慈欣，男，汉族，1963年6月出生，1985年10月参加工作，
						山西阳泉人，本科学历，高级工程师，科幻作家，中国作家协
						会会员，中国科普作家协会会员，山西省作家协会副主席 ，阳
						泉市作家协会副主席，中国科幻小说代表作家之一。
						<span class="autor-all">
						刘慈欣，男，汉族，1963年6月出生，1985年10月参加工作，
						山西阳泉人，本科学历，高级工程师，科幻作家，中国作家协
						会会员，中国科普作家协会会员，山西省作家协会副主席 ，阳
						泉市作家协会副主席，中国科幻小说代表作家之一。
						</span>
					</p>
					<p class="mui-text-center">
						<i class="mui-icon iconfont pull1">&#xe61a;</i>
					</p>
				</div>
				<div class="m5">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							评价
						</li>
					</ul>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;" onclick="openNewPage('pingjia-detail.html')">
								<img class="mui-media-object touxiang mui-pull-left" src="../public/img/8.png">
								<div class="mui-media-body">
									<span class="mui-h5  mui-lan">小黄人</span>
									<span class="mui-pull-right mui-h6"><i class="iconfont mui-icon">&#xe61d;</i>100</span>
									<span class="iconfont gray mlr"><map class="mui-lvs">&#xe627;&#xe627;&#xe627;&#xe627;&#xe627;</map></span>
									<p class="words">《三体》真的很好看！</p>
									<p class="time"><span>100</span>回复</p>
									
								</div>
							</a>
						</li>
					</ul>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;" onclick="openNewPage('pingjia-detail.html')">
								<img class="mui-media-object touxiang mui-pull-left" src="../public/img/8.png">
								<div class="mui-media-body">
									<span class="mui-h5  mui-lan">小黄人</span>
									<span class="mui-pull-right mui-h6"><i class="iconfont mui-icon">&#xe61d;</i>100</span>
									<span class="iconfont gray mlr"><map class="mui-lvs">&#xe627;&#xe627;&#xe627;&#xe627;&#xe627;</map></span>
									<p class="words">《三体》真的很好看！</p>
									<p class="time"><span>100</span>回复</p>
									
								</div>
							</a>
						</li>
					</ul>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;" onclick="openNewPage('pingjia-detail.html')">
								<img class="mui-media-object touxiang mui-pull-left" src="../public/img/8.png">
								<div class="mui-media-body">
									<span class="mui-h5  mui-lan">小黄人</span>
									<span class="mui-pull-right mui-h6"><i class="iconfont mui-icon">&#xe61d;</i>100</span>
									<span class="iconfont gray mlr"><map class="mui-lvs">&#xe627;&#xe627;&#xe627;&#xe627;&#xe627;</map></span>
									<p class="words">《三体》真的很好看！</p>
									<p class="time"><span>100</span>回复</p>
									
								</div>
							</a>
						</li>
					</ul>
					<ul class="mui-table-view" style="margin-bottom: 1em;">
						<li class="mui-table-view-cell mui-text-center" onclick="openNewPage('pingjia.html')">
							<span class="gray">查看全部评论</span>
						</li>
					</ul>
				</div>
			</div>
			<div id="topPopover" class="mui-popover">
				<div class="mui-popover-arrow"></div>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-text-center">
							<i class="mui-icon iconfont mui-blus">&#xe60f;</i>
							<span>Facebook</span>
						</li>
					</ul>
			</div>
		</div>
		<script src="../js/mui.js"></script>
		<script src="../libs/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/open.js"></script>
		<script>
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			$(".want-read").on("tap",function(){
				$(this).addClass('mui-red')
				$(this).html('&#xe628;')
				mui.toast('已标记为想读')
			})
			$(".pull").on('click',function(){
				if($(".brief-all").is(':hidden')){
					$(".brief-all").toggle()
					$(this).html('&#xe619;')
				}else{
					$(".brief-all").toggle()
					$(this).html('&#xe61a;')
				}
				
			})
			$(".pull1").on('click',function(){
				if($(".autor-all").is(':hidden')){
					$(".autor-all").toggle()
					$(this).html('&#xe619;')
				}else{
					$(".autor-all").toggle()
					$(this).html('&#xe61a;')
				}
				
			})
			$(".jiaru").on("tap",function(){
				mui.toast('已加入书架')
			})
			$(".read").on("tap",function(){
				openNewPage('read-books.html')
			})
		</script>
	</body>

</html>